<template>
  <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="dialogVisible">
    <el-form ref="formRef" class="p-3" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="元素类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择元素类型">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type == '1'" label="按钮编码" prop="code">
        <el-input v-model="form.code" placeholder="请输入按钮唯一编码"></el-input>
      </el-form-item>
      <el-form-item :label="form.type == '1' ? '按钮标题' : '菜单标题'" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item v-if="(isEdit && form.parentId != null && form.parentId != '') || !isEdit" label="上级菜单" prop="parentId">
        <el-tree-select
          :disabled="isEdit"
          :props="defaultProps"
          v-model="form.parentId"
          :data="treeData"
          filterable
          check-strictly
          :render-after-expand="false"
        >
        </el-tree-select>
      </el-form-item>
      <el-form-item v-if="form.type == '0'" label="元素名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入元素名称"></el-input>
      </el-form-item>
      <el-form-item v-if="form.type == '0'" label="菜单路径" prop="path">
        <el-input v-model="form.path" placeholder="请输入菜单路径"></el-input>
      </el-form-item>
      <el-form-item v-if="form.type == '0'" label="组件位置" prop="component">
        <el-input v-model="form.component" placeholder="请输入组件位置"></el-input>
      </el-form-item>
      <el-form-item v-if="(form.component == null || form.component == '') && form.type == '0'" label="重定向" prop="redirect">
        <el-tree-select
          :props="Props"
          v-model="form.redirect"
          :data="treeData"
          filterable
          check-strictly
          :render-after-expand="false"
        >
        </el-tree-select>
      </el-form-item>
      <el-form-item v-if="form.type == '0'" label="菜单图标" prop="icon">
        <SelectIcon v-model="form.icon" v-model:icon-value="form.icon" title="图标选择器" placeholder="请选择图标" />
      </el-form-item>
      <!-- <el-form-item label="活动菜单" prop="activeMenu">
        <el-tree-select
          :props="Props"
          v-model="form.activeMenu"
          :data="treeData"
          filterable
          check-strictly
          :render-after-expand="false"
        >
        </el-tree-select>
      </el-form-item> -->
      <el-form-item v-if="form.type == '0'" label="外链地址" prop="isLink">
        <el-input v-model="form.isLink" placeholder="请输入外链地址"></el-input>
      </el-form-item>
      <el-form-item v-if="form.type == '0'" label="排序" prop="orderNum">
        <el-input-number v-model="form.orderNum" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input :rows="2" type="textarea" maxlength="255" v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-row v-if="form.type == '0'" :gutter="20">
        <el-col :span="6">
          <el-form-item label="隐藏" prop="isHide">
            <el-switch v-model="form.isHide">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="全屏" prop="isFull">
            <el-switch v-model="form.isFull">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="固定在标签页" prop="isAffix">
            <el-switch v-model="form.isAffix">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="缓存路由" prop="isKeepAlive">
            <el-switch v-model="form.isKeepAlive">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, defineEmits, onMounted } from "vue";
import { addElement, updateElement, getElementById, getElements } from "@/api/modules/element";
import { ElMessage } from "element-plus";
import SelectIcon from "@/components/SelectIcon/index.vue";
const dialogVisible = ref(false);
const formRef = ref(null);
const form = ref({
  parentId: "",
  name: "",
  path: "",
  component: "",
  redirect: "",
  icon: "",
  title: "",
  activeMenu: "",
  isLink: "",
  isHide: false,
  isFull: false,
  isAffix: false,
  isKeepAlive: true,
  type: "0",
  code: "",
  remark: "",
  orderNum: ""
});
const rules = {
  name: [{ required: true, message: "请输入元素名称", trigger: "blur" }],
  path: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],
  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
  title: [{ required: true, message: "请输入菜单标题", trigger: "blur" }],
  icon: [{ required: true, message: "请输入菜单图标", trigger: "blur" }],
  code: [
    { required: true, message: "请输入菜单编码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (form.value.type === "1" && !value) {
          callback(new Error("请输入按钮编码"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};
const isEdit = ref(false);
const emit = defineEmits(["cancel", "confirm"]);

const handleCancel = () => {
  emit("cancel");
  dialogVisible.value = false;
};

const handleConfirm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      const apiCall = isEdit.value ? updateElement : addElement;
      apiCall(form.value).then(res => {
        if (res.code === 200) {
          emit("confirm");
          ElMessage.success(isEdit.value ? "编辑成功！" : "添加成功！");
          getElements({}).then(res => {
            treeData.value = res.data;
          });
          dialogVisible.value = false;
          formRef.value.resetFields();
        }
      });
    }
  });
};
const defaultProps = {
  label: "title",
  children: "children",
  value: "elementId"
};
const Props = {
  label: "title",
  children: "children",
  value: "path"
};
const openDialog = id => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  dialogVisible.value = true;
  if (id) {
    isEdit.value = true;
    getElementById(id).then(res => {
      form.value = res.data;
    });
  } else {
    isEdit.value = false;
    form.value = {
      parentId: "",
      name: "",
      path: "",
      component: "",
      redirect: "",
      icon: "",
      title: "",
      activeMenu: "",
      isLink: "",
      isHide: false,
      isFull: false,
      isAffix: false,
      isKeepAlive: true,
      type: "0",
      code: "",
      remark: "",
      orderNum: "1"
    };
  }
};
const treeData = ref([]);
onMounted(() => {
  getElements({}).then(res => {
    treeData.value = res.data;
  });
});

const typeOptions = ref([
  {
    label: "菜单",
    value: "0"
  },
  {
    label: "按钮",
    value: "1"
  }
]);
const setpid = val => {
  form.value.parentId = val;
};
defineExpose({
  setpid,
  openDialog
});
</script>
